<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/index/articleList' }"
        >>文章管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>文章添加</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" height="calc( 100vh - 230px )">
      <el-form ref="form" :model="form" label-width="80px">
        <!-- 标题 -->
        <el-form-item label="标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <!-- 类型 -->
        <el-form-item label="类型">
          <el-radio-group v-model="form.type">
            <el-radio :label="1">文章</el-radio>
            <el-radio :label="2">视频</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 内容 -->
        <el-form-item label="内容">
          <div v-show="form.type == 1">
            <VueEditor :config="config" ref="vueEditor" />
          </div>
          <div v-show="form.type == 2">
            <el-upload
              class="upload-demo"
              :action="baseURL + '/upload'"
              :headers="{ Authorization: token }"
              :on-success="vidoeUpload"
              :on-exceed="handleExceed"
              :limit="1"
              :on-remove="handleRemove"
              multiple
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传视频文件</div>
            </el-upload>
          </div>
          <!-- this.$refs.vueEditor.editor.root.innerHTML -->
        </el-form-item>
        <!-- 栏目 -->
        <el-form-item label="栏目">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 15px 0"></div>
          <el-checkbox-group
            v-model="form.categories"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="item in categoryList"
              :label="item.id"
              :key="item.id"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="封面">
          <el-upload
            :action="baseURL + '/upload'"
            list-type="picture-card"
            :headers="{ Authorization: token }"
            :limit="3"
            :on-exceed="coverHandleExceed"
            :on-success="coverSuccessFn"
            :on-remove="coverRemoveFn"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-button type="success" @click="publishFn">发布文章</el-button>
    </el-card>
  </div>
</template>

<script>
import { category, publish } from "@/API/news";
import axios from "@/utils/request";
import VueEditor from "vue-word-editor";
import "quill/dist/quill.snow.css";
export default {
  created() {
    category().then((res) => {
      // console.log(res);
      this.categoryList = res.data.data;
    });
  },
  data() {
    return {
      baseURL: axios.defaults.baseURL,
      checkAll: false,
      categoryList: [],
      isIndeterminate: true,
      vidoeContent: "",
      token: JSON.parse(localStorage.getItem("hm-back-token")),
      form: {
        title: "",
        type: 1,
        content: "",
        cover: [],
        categories: [],
      },
      config: {
        // 上传图片的配置
        uploadImage: {
          url: axios.defaults.baseURL + "/upload",
          name: "file",
          // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
          uploadSuccess(res, insert) {
            insert(axios.defaults.baseURL + res.data.data.url);
          },
          headers: {
            Authorization: JSON.parse(localStorage.getItem("hm-back-token")),
          },
        },

        // 上传视频的配置
        uploadVideo: {
          url: axios.defaults.baseURL + "/upload",
          name: "file",
          headers: {
            Authorization: JSON.parse(localStorage.getItem("hm-back-token")),
          },
          uploadSuccess(res, insert) {
            insert(axios.defaults.baseURL + res.data.url);
          },
        },
      },
    };
  },
  methods: {
    // 发布文章
    publishFn() {
      // 判定上传的类型(文章或者视频)
      if (this.form.type == 1) {
        this.form.content = this.$refs.vueEditor.editor.root.innerHTML;
      } else {
        this.form.content = axios.defaults.baseURL + this.vidoeContent;
      }
      this.form.categories = this.form.categories.map((item) => {
        return { id: item };
      });
      if (
        !this.form.content ||
        !this.form.categories ||
        !this.form.title ||
        !this.form.cover
      ) {
        this.$message.warning("信息未输入完成，请检查！！！");
        return;
      }
      publish(this.form).then((res) => {
        // console.log(163, res);
        if (res.data.message == "文章发布成功") {
          this.$router.push("/index/articleList");
        }
      });
    },
    // 视频上传成功
    vidoeUpload(response) {
      console.log(155, response);
      this.vidoeContent = response.data.url;
    },
    //上传文件限制
    handleExceed() {
      this.$message.warning("只能一次哟");
    },
    //删除视频
    handleRemove() {
      this.vidoeContent = "";
    },
    // 全选影响单选
    handleCheckAllChange(val) {
      // console.log(val);
      this.form.categories = val
        ? this.categoryList.map((item) => item.id)
        : [];
      this.isIndeterminate = false;
    },
    // 单选影响全选
    handleCheckedCitiesChange(value) {
      // console.log(value);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.categoryList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.categoryList.length;
    },
    // 封面上传成功
    coverSuccessFn(response) {
      // console.log(response);
      this.form.cover.push(response.data);
    },
    //封面图片上传不满足条件
    coverHandleExceed() {
      this.$message.warning("封面最多三张！！！");
    },
    //封面删除
    coverRemoveFn(file, fileList) {
      // console.log(file, fileList);
      this.form.cover = this.form.cover.filter(
        (item) => file.response.data.id != item.id
      );
    },
  },
  components: {
    VueEditor,
  },
};
</script>


<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 15px;
}
</style>